<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>发改局</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
<!--  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">-->
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
<!--  <link rel="stylesheet" href="../dist/css/adminlte.min.css">-->
<!--  &lt;!&ndash; Ekko Lightbox &ndash;&gt;-->
<!--  <link rel="stylesheet" href="../plugins/ekko-lightbox/ekko-lightbox.css">-->


  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
  <!-- Ekko Lightbox -->
  <link rel="stylesheet" href="../../plugins/ekko-lightbox/ekko-lightbox.css">

</head>


<body class="hold-transition sidebar-mini">
<div class="wrapper">

  <!-- 主内容容器 -->
  <div class="content-wrapper">

    <!-- 容器头标题 -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">

          <div class="col-sm-6">
            <h1 class="m-0">修改企业</h1>
          </div>

          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">首页</a></li>
              <li class="breadcrumb-item active">修改企业</li>
            </ol>
          </div>

        </div>
      </div>
    </div>

    <!-- 主题内容正文 -->
    <div class="content">
      <div class="container-fluid">

        <div class="row">
          <div class="col-lg-12">
            <!-- 添加div -->
            <div class="card card-primary">

              <!-- 卡片头部 -->
              <div class="card-header">
                <h3 class="card-title">修改企业</h3>
              </div>

              <!-- 表单开始 -->
              <form id="formbody" action="/en/enterprise/change" method="post" enctype="multipart/form-data">
                <div class="card-body">

                  <div class="row">
                    <div class="col-lg-6">

                      <input type="hidden" name="id" th:value="${data.getId()}" />
                      <div class="form-group">
                        <label for="enName"><span style="color: red">*</span>企业名称</label>
                        <input type="text" class="form-control" id="enName" name="enName" th:value="${data.getEnName()}" placeholder="企业名称">
                      </div>

                      <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="subEn" th:checked="${data.getrId() != null}">
                        <label class="form-check-label" for="subEn" >是否为子企业</label>
                      </div>

                      <div class="form-group">
                        <label>父企业选择</label>
                        <select class="form-control" id="parentEn" name="rId" th:disabled="${data.getrId() == null}">
                        </select>
                      </div>

                      <div class="form-group">
                        <label for="en_persion_name"><span style="color: red">*</span>企业负责人姓名</label>
                        <input type="text" class="form-control" id="en_persion_name" name="enPersionName" th:value="${data.enPersionName}" placeholder="企业负责人姓名">
                      </div>

<!--                      <div class="form-group">-->
<!--                        <label for="industry"><span style="color: red">*</span>所属行业</label>-->
<!--                        <input type="text" class="form-control" id="industry" name="industry" th:value="${data.industry}" placeholder="所属行业">-->
<!--                      </div>-->

<!--                      <div class="form-group">-->
<!--                        <label for="totalInvestment"><span style="color: red">*</span>总投资(万元)</label>-->
<!--                        <input type="number" class="form-control" id="totalInvestment" name="totalInvestment" th:value="${data.totalInvestment}" placeholder="总投资">-->
<!--                      </div>-->

                      <div class="form-group">
                        <label for="file_id">上传企业执照</label>

                          <div class="input-group">
                            <div class="row">
                              <div class="col-lg-12">
                                <!-- 营业执照图片                                         -->
                                <a th:href="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()+'/'+data.getLicenseImg()}" data-toggle="lightbox" data-title="图片预览">
                                  <img th:src="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()+'/'+data.getLicenseImg()}" class="img-fluid mb-2" alt="营业执照"
                                       style="border: 1px solid black; padding: 10px; width: 180px;"/>
                                </a>

                              </div>

                            </div>
                          </div>

                          <div class=" input-group" style="margin: 7px;">
                            <div class="row">
                              <div class="col-lg-12">
                                <div class="input-file">
                                  <input type="file" class="custom-file-input" name="file" id="file_id">
                                  <label class="custom-file-label" for="file_id" id="uploadFileText" th:text="${data.licenseImg}" style="width: 500px;"></label>
                                </div>
                              </div>
                            </div>
                          </div>
                      </div>

                      <div class="form-check" style="margin-bottom: 10px">
                        <input type="checkbox" class="form-check-input" id="enable" name="enable" th:checked="${data.enable}">
                        <label class="form-check-label" for="enable">是否运营</label>
                      </div>
                    </div>

                    <div class="col-lg-6">



                      <div class="form-group">
                        <label for="en_tel"><span style="color: red">*</span>企业联系电话(<span style="color: blue">座机</span>/<span style="color: blue">手机</span>)号</label>
                        <input type="text" class="form-control" id="en_tel" name="enTel" th:value="${data.enTel}" placeholder="企业联系电话">
                      </div>

                      <div class="form-group">
                        <label for="project_report_persion"><span style="color: red">*</span>项目上报人</label>
                        <input type="text" class="form-control" id="project_report_persion" name="projectReportPerson" th:value="${data.projectReportPerson}" placeholder="项目上报人">
                      </div>

                      <div class="form-group">
                        <label for="project_report_persion_post"><span style="color: red">*</span>项目上报人职务</label>
                        <input type="text" class="form-control" id="project_report_persion_post" name="projectReportPersonPost" th:value="${data.projectReportPersonPost}" placeholder="项目上报人职务">
                      </div>

                      <div class="form-group">
                        <label for="project_report_persion_tel"><span style="color: red">*</span>项目上报人手机号</label>
                        <input type="tel" class="form-control" id="project_report_persion_tel" name="projectReportPersonTel" th:value="${data.projectReportPersonTel}" placeholder="项目上报人手机号">
                      </div>

                      <div class="form-group" th:if="${#httpSession.getAttribute('role_id') == 1}">
                        <label><span style="color: red">*</span>为企业选择关联的用户</label>
                        <select class="form-control" id="userId" name="userId">
                        </select>
                      </div>
                    </div>
                </div>

                <!-- 添加按钮 -->
                <div class="card-footer">
                  <button type="button" class="btn btn-primary" id="save_btn">保存</button>
                </div>
                </div>
              </form>

            </div>

          </div>

          <div class="col-lg-6">
          </div>

        </div>
      </div>
    </div>
  </div>

  <aside class="control-sidebar control-sidebar-dark">
  </aside>

  <!-- 版权信息 -->
  <footer class="main-footer">
    <strong>Copyright &copy; 2021 <a href="http://www.chengzhouyun.com/" target="_blank">ChengZhouYun</a>.</strong>
    All rights reserved.
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> 1.0
    </div>
  </footer>

</div>

<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<!--<script src="../plugins/jquery/jquery.min.js"></script>-->
<!--&lt;!&ndash; Bootstrap &ndash;&gt;-->
<!--<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>-->
<!--&lt;!&ndash; AdminLTE &ndash;&gt;-->
<!--<script src="../dist/js/adminlte.js"></script>-->

<!--&lt;!&ndash; OPTIONAL SCRIPTS &ndash;&gt;-->
<!--<script src="../plugins/chart.js/Chart.min.js"></script>-->
<!--&lt;!&ndash; AdminLTE for demo purposes &ndash;&gt;-->
<!--<script src="../dist/js/demo.js"></script>-->
<!--&lt;!&ndash; Ekko Lightbox &ndash;&gt;-->
<!--<script src="../plugins/ekko-lightbox/ekko-lightbox.min.js"></script>-->
<!--&lt;!&ndash; Filterizr&ndash;&gt;-->
<!--<script src="../plugins/filterizr/jquery.filterizr.min.js"></script>-->
<!--&lt;!&ndash; AdminLTE dashboard demo (This is only for demo purposes) &ndash;&gt;-->
<!--<script src="../dist/js/pages/dashboard3.js"></script>-->


<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="../../dist/js/adminlte.js"></script>

<!-- OPTIONAL SCRIPTS -->
<script src="../../plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- Ekko Lightbox -->
<script src="../../plugins/ekko-lightbox/ekko-lightbox.min.js"></script>
<!-- Filterizr-->
<script src="../../plugins/filterizr/jquery.filterizr.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<!--<script src="../../dist/js/pages/dashboard3.js"></script>-->
</body>

<script th:inline="javascript">

  // true:数值型的，false：非数值型
  function myIsNaN(value) {
    return !isNaN(value);
  }

  function isPhoneNumber(val){
    var regPos =/^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
    // var regpos2 = /\d{7}/;
    var regpos2 = /^\d{7}$/;
    var regpos3 = /\d{4}-\d{7}/;
    if(regPos.test(val) || regpos2.test(val) || regpos3.test(val)){
      return true;
    }else {
      return false;
    }
  }
  function isOnlyPhoneNumber(val){
    var regPos =/^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
    if(regPos.test(val)){
      return true;
    }else {
      return false;
    }
  }

  function isEmptyNull(value){
    if (value == undefined || value == null || value =="") {
      return false;
    }
    return true;
  }

  $(function () {
    // 登录的角色是管理员的情况下在做请求
    const role_id = /*[[${#httpSession.getAttribute('role_id')}]]*/{};  //{}是默认值,/*[[${user}]]*/ 是传进去的值
    const user_id = /*[[${#httpSession.getAttribute('user_id')}]]*/{};  //{}是默认值,/*[[${user}]]*/ 是传进去的值
    const enUser_id = /*[[${data.enUserId}]]*/{};  //{}是默认值,/*[[${user}]]*/ 是传进去的值
    // 保存按钮事件
    $("#save_btn").on("click",function(event){

      if(!isEmptyNull($("#enName").val())){
        alert('请填写企业名称');
        return;
      }

      // if(!isEmptyNull($("#address").val())){
      //   alert('请填写企业住所');
      //   return;
      // }
      // if(!isEmptyNull($("#industry").val())){
      //   alert('请填写所属行业');
      //   return;
      // }
      // if(!isEmptyNull($("#totalInvestment").val())){
      //   alert('请填写总投资');
      //   return;
      // }
      //
      // if(!myIsNaN($("#totalInvestment").val())){
      //   alert('总投资不是有效的数值');
      //   return;
      // }

      if(!isEmptyNull($("#en_persion_name").val())){
        alert('请填写企业负责人姓名');
        return;
      }
      if(!isEmptyNull($("#en_tel").val())){
        alert('请填写企业联系电话');
        return;
      }

      if(!isPhoneNumber($("#en_tel").val())){
        alert('企业联系电话格式不对');
        return;
      }


      if(!isEmptyNull($("#project_report_persion").val())){
        alert('请填写项目上报人');
        return;
      }



      if(!isEmptyNull($("#project_report_persion_post").val())){
        alert('请填写项目上报人职务');
        return;
      }
      if(!isEmptyNull($("#project_report_persion_tel").val())){
        alert('请填写项目上报人电话');
        return;
      }

      if(!isOnlyPhoneNumber($("#project_report_persion_tel").val())){
        alert('项目上报人手机号格式不对');
        return;
      }

      if(role_id == 1){
        if(!isEmptyNull($("#userId").val())){
          alert('请为企业选择关联的用户');
          return;
        }
      }

      if(!$("#subEn").prop("checked")){
        $("#parentEn option:selected").attr("selected",false)
      }

      // if(!isEmptyNull($("#file_id").val())){
      //   alert("图片必须重新选择")
      //   return;
      // }

      $.ajax({
        url:"/en/enterprise/change",
        type:"POST",
        data: new FormData($("#formbody")[0]),
        contentType: false,
        processData : false,
        dataType:"json",
        success: function(res){

          if(res.statusCode == 200) {
            alert(res.message);
            // 跳转页面
            location.href = "/page/EnterpriseInfo"
          } else{
            alert(res.errorMsg);
          }

        }
      })

    })



    if (role_id == 1) {
      // 请求企业用户列表 2为企业用户列表
      $.get("/usr/user/list/"+ 2,function(data){
        // 取用户下拉框
        var select = document.getElementById("userId");
        // 情况下拉框中的option
        var arr_option = select.options;
        // 先清除在添加
        for(var i = arr_option.length-1;i>=0;i--){
          arr_option.remove(i);
        }
        // 数据状态码为200通过
        if (data.statusCode == 200) {

          // 取到list数据集合
          var list = data.list;
          // forEach遍历
          list.forEach(function(item){
            // 创建select中的option
            var option = document.createElement('option');
            // 赋值用户id给value
            option.value = item.id;
            // 赋值用户名给内容
            option.innerHTML = item.username;
            // 添加到select中
            select.append(option);
          })

          // 默认选中关联用户
          $("#userId").val(enUser_id);
        }
      })
    }


    // 企业下拉获取填充
    // 取下拉框
    var select = document.getElementById("parentEn");
    // 情况下拉框中的option
    var arr_option = select.options;
    for(var i = arr_option.length-1;i>=0;i--){
      arr_option.remove(i);
    }
    // 发起jsonget 请求
    $.getJSON(
      "/en/enterprise/all",
      function(data){
        // 数据状态码为200通过
        if (data.statusCode == 200) {

          // 取到list数据集合
          var list = data.list;
          // forEach遍历
          list.forEach(function(item){
            // 创建select中的option
            var option = document.createElement('option');
            // 赋值id和企业名称
            option.value = item.id;
            option.innerHTML = item.enName;
            // 添加到select中
            select.append(option);
          })
          const rId_id = /*[[${data.rId}]]*/{};  //{}是默认值,/*[[${user}]]*/ 是传进去的值
          if (isEmptyNull(rId_id)) {
            $("#subEn").prop("checked",true);
            const parent_id = /*[[${data.rId}]]*/{};  //{}是默认值,/*[[${user}]]*/ 是传进去的值
            $("#parentEn").val(parent_id)
          }

        }
      })


    // 图片选择事件
    $("#exampleInputFile").change("value",function(){
      var value = $("#exampleInputFile").val();
      if (value != undefined && value != ''){
        $("#uploadFileText").text(value);
      }
    })

    // 是否为子企业切换点击事件注册
    $("#subEn").on("click", function () {
      // 得到复选框状态
      var checked = $("#subEn").prop("checked");
      // 判断是否选中
      if (checked) {
        // 移除select的禁用
        $("#parentEn").removeAttr("disabled")
        // thymeleaf 模板引擎中获取session 的角色id和用户id

        // 取下拉框
        var select = document.getElementById("parentEn");
        // 情况下拉框中的option
        var arr_option = select.options;
        for(var i = arr_option.length-1;i>=0;i--){
          arr_option.remove(i);
        }
        // 判断角色是否为管理员
        // if (role_id == 1) {
          // 发起jsonget 请求
          $.getJSON(
                 "/en/enterprise/all",
                  function(data){
                    // 数据状态码为200通过
                    if (data.statusCode == 200) {

                      // 取到list数据集合
                      var list = data.list;
                      // forEach遍历
                      list.forEach(function(item){
                        // 创建select中的option
                        var option = document.createElement('option');
                        // 赋值id和企业名称
                        option.value = item.id;
                        option.innerHTML = item.enName;
                        // 添加到select中
                        select.append(option);
                      })

                    }

                  })
        // }
        // else {
        //   $.get("/en/enterprise/userid/"+ user_id,function(data){
        //
        //     // 数据状态码为200通过
        //     if (data.statusCode == 200) {
        //       // 取到list数据集合
        //       var list = data.list;
        //       // forEach遍历
        //       list.forEach(function(item){
        //         // 创建select中的option
        //         var option = document.createElement('option');
        //         // 赋值id和企业名称
        //         option.value = item.id;
        //         option.innerHTML = item.enName;
        //         // 添加到select中
        //         select.append(option)
        //       })
        //     }
        //   })
        // }

      } else {
        $("#parentEn").attr("disabled","disabled")
      }
    });

    // 营业执照图片预览处理
    $(document).on('click', '[data-toggle="lightbox"]', function (event) {
      event.preventDefault();
      $(this).ekkoLightbox({
        alwaysShowClose: true
      });
    });


    $('.btn[data-filter]').on('click', function () {
      $('.btn[data-filter]').removeClass('active');
      $(this).addClass('active');
    });

  })
</script>

</html>
